import React from 'react';
import { TabBar } from 'antd-mobile';
import IndexContainer from '../containers/IndexContainer';
import MineContainer from '../containers/MineContainer';
import LoginContainer from '../containers/LoginContainer';

const tabBarItems = [
    {title: '首页', icon: require('../imgs/t1.png'), component: IndexContainer},
    {title: '发现', icon: require('../imgs/t2.png'), component: IndexContainer},
    {title: '查询', icon: require('../imgs/t3.png'), component: IndexContainer},
    {title: '我的', icon: require('../imgs/t4.png'), component: MineContainer},
];

export default class TabBarView extends React.Component{

    constructor(props) {
        super(props);
        let index = props.index || 0;
        this.state = {
          selectedTab: tabBarItems[index].title,
          hidden: false,
        };

        // if(global.user.accessTicket == ''){
        //     tabBarItems[3].component = LoginContainer;
        // }
    }

    render() {

        return (
            <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
              >
              {tabBarItems.map((obj, i) => {
                let Component = obj.component;
                return (
                  <TabBar.Item
                    title={obj.title}
                    key={i}
                    icon={obj.icon}
                    selected={this.state.selectedTab === obj.title}
                    onPress={() => {
                      this.setState({
                        selectedTab: obj.title,
                      });
                    }}
                  >
                    <Component {...this.props} />
                  </TabBar.Item>
                );
              })}
            </TabBar>
        )
    }
}